<template>
  <div class="ssr">
    <header class="header">微医</header>


    <div class="content">
      <div class="search">
        <div class="searcher">
          <i class="iconfont icon-sousuo"></i>
          <span class="span">搜索医院，医生，科室，疾病</span>
        </div>
        <div class="right">
          <i class="iconfont icon-tubiao207"></i>
          <span class="span">签到</span>
        </div>
      </div>

      <div class="banner">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class="img" src="/static/img/index/banner01.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img class="img" src="/static/img/index/banner02.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img class="img" src="/static/img/index/banner03.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img class="img" src="/static/img/index/banner04.jpg" alt="">
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
      </div>

      <div class="enterFour">
        <ul class="con">
          <li class="li one" @click="goGuahao01">
            <img class="img" src="/static/img/index/01.png" alt="">
            <span class="span">预约挂号</span>
          </li>
          <li class="li">
            <img class="img" src="/static/img/index/02.png" alt="">
            <span class="span">名医直通</span>
          </li>
          <li class="li">
            <img class="img" src="/static/img/index/03.png" alt="">
            <span class="span">在线药房</span>
          </li>
          <li class="li">
            <img class="img" src="/static/img/index/04.png" alt="">
            <span class="span">VIP会员</span>
          </li>
        </ul>
      </div>

      <ul class="enterThree">
        <li class="li">
          <img src="/static/img/index/05.png" alt="" class="img">
          <p class="p1">免费咨询</p>
          <p class="p2">全天候极速响应</p>
        </li>
        <li class="li">
          <img src="/static/img/index/06.png" alt="" class="img">
          <p class="p1">专家问诊</p>
          <p class="p2">大牌专家坐镇问诊</p>
        </li>
        <li class="li">
          <img src="/static/img/index/07.png" alt="" class="img">
          <p class="p1">今日义诊</p>
          <p class="p2">特邀医生爱心解答</p>
        </li>
      </ul>

      <div class="qiangda">
        <div class="daJaBang">
          <p class="p">
            <span class="left">29位医生已抢答</span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
            <span class="right">生姜真的防脱发吗？我网上看到有说生姜煮水洗头可以防掉发 所以试了两次 发现不太好 具体使用情况如下图 发现掉发更严重了 而且头皮有点刺痛的感觉 麻烦各位老师讲解下 </span>
          </p>
        </div>
      </div>

      <div class="threepic">
        <a href="#" class="a1"></a>
        <a href="#" class="a2"></a>
        <a href="#" class="a3"></a>
      </div>

      <img src="/static/img/index/10.png" alt="" class="lianMen">

      <div class="reDian">
        <div class="top">
          <p class="p">健康号热点</p>
          <ul class="topCenter">
            <li class="li">
              <img src="/static/img/index/11.png" alt="" class="img">
              <span class="span">慢病调理</span>
            </li>
            <li class="li">
              <img src="/static/img/index/12.png" alt="" class="img">
              <span class="span">就医互助</span>
            </li>
            <li class="li">
              <img src="/static/img/index/13.png" alt="" class="img">
              <span class="span">两性之间</span>
            </li>
            <li class="li">
              <img src="/static/img/index/14.png" alt="" class="img">
              <span class="span">探索更多</span>
            </li>
          </ul>
          <ul class="topbottom">
            <li class="li">
              <span class="span1"><span>热</span></span>
              <span class="span">#2017年度医生品牌#</span>
            </li>
            <li class="li">
              <span class="span1">热</span>
              <span class="span">#2017年度医生品牌#</span>
            </li>
            <li class="li">
              <span class="span1">热</span>
              <span class="span">#2017年度医生品牌#</span>
            </li>
            <li class="li">
              <span class="span1">热</span>
              <span class="span">#2017年度医生品牌#</span>
            </li>
          </ul>
        </div>
        <div class="question">
          <p class="p">为什么年年体检正常结果还是得了癌？</p>
          <p class="con">随着大众健康意识的提高，体检已成为很多人每年必做的功课。曾有不少人认为体检过关了，就代表健康没问题，认为一年内都可以高枕无忧了。但有人说，每年做体检的人，一样查不出癌症，所以说体检根本没啥用处；也有人...</p>
          <div class="bottom">
            <span class="span1">孙春权</span>
            <span class="dec">主治医师</span>
            <span class="readnum">阅读8381-回复7</span>
          </div>
        </div>
        <div class="question">
          <p class="p">为什么年年体检正常结果还是得了癌？</p>
          <p class="con">随着大众健康意识的提高，体检已成为很多人每年必做的功课。曾有不少人认为体检过关了，就代表健康没问题，认为一年内都可以高枕无忧了。但有人说，每年做体检的人，一样查不出癌症，所以说体检根本没啥用处；也有人...</p>
          <div class="bottom">
            <span class="span1">孙春权</span>
            <span class="dec">主治医师</span>
            <span class="readnum">阅读8381-回复7</span>
          </div>
        </div>
      </div>

      <dl class="message">

        <dt class="dt">
          <a href="#" class="a focus">推荐</a>
          <a href="#" class="a">生活</a>
          <a href="#" class="a">两性</a>
          <a href="#" class="a">母婴</a>
          <a href="#" class="a">女性</a>
          <a href="#" class="a">营养</a>
        </dt>
        <dd class="dd">
          <div class="tuijian">
            <img src="/static/img/index/15.jpg" alt="" class="img">
            <div class="right">
              <p class="top">吃饭不简单，你吃对了吗？</p>
              <p class="bottom">一日三餐这样吃才健康！</p>
            </div>
          </div>
          <div class="tuijian">
            <img src="/static/img/index/15.jpg" alt="" class="img">
            <div class="right">
              <p class="top">吃饭不简单，你吃对了吗？</p>
              <p class="bottom">一日三餐这样吃才健康！</p>
            </div>
          </div>
          <div class="tuijian">
            <img src="/static/img/index/15.jpg" alt="" class="img">
            <div class="right">
              <p class="top">吃饭不简单，你吃对了吗？</p>
              <p class="bottom">一日三餐这样吃才健康！</p>
            </div>
          </div>
          <div class="tuijian">
            <img src="/static/img/index/15.jpg" alt="" class="img">
            <div class="right">
              <p class="top">吃饭不简单，你吃对了吗？</p>
              <p class="bottom">一日三餐这样吃才健康！</p>
            </div>
          </div>
          <div class="tuijian">
            <img src="/static/img/index/15.jpg" alt="" class="img">
            <div class="right">
              <p class="top">吃饭不简单，你吃对了吗？</p>
              <p class="bottom">一日三餐这样吃才健康！</p>
            </div>
          </div>
          <div class="tuijian">
            <img src="/static/img/index/15.jpg" alt="" class="img">
            <div class="right">
              <p class="top">吃饭不简单，你吃对了吗？</p>
              <p class="bottom">一日三餐这样吃才健康！</p>
            </div>
          </div>
        </dd>
      </dl>
    </div>

    <Foot></Foot>

  </div>
</template>

<script>
  import Foot from "../components/commons/Foot"
    export default {
        components:{
          Foot
        },
        name: 'Index',
        data() {
            return {}
        },
      methods:{
        goGuahao01:function(){
          this.$router.push("/guahao01")
        }
      },
      mounted:function(){
        $(function(){
          var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            speed:300,
            autoplay : {
              delay:3000
            },

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            }
          })
        });
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../assets/css/index.css";
</style>
